

<p class="text-justify">
  <p class="lead">

  </p>
</p>

<div class="card opacity-1" style="width: 80%;margin: auto;">
  <div class="card-body">
    <h2 class="card-title"><%= @product.name %></h2>
    <p class="card-text"><%= @product.depscription %></p>
  </div>
</div>

<p>


<br />
<hr style="width: 88%;" />
<br />

<h1 class="display-8" style="margin:0 0 33px 33px;">
<span class="badge badge-secondary">Comments</span>
</h1>

  <% if @product.comments.empty? %>

    <p></p>
    <h5> 评论区空空如也🙃 </h5>

  <% else %>

  <% @product.comments.each do |comment| %>

   <div class="card border-primary mb-3 opacity-1" style="margin-left: 33px;max-width: 18rem;">
  <div class="card-header"><%= comment.commenter %></div>
  <div class="card-body text-primary">
    <p class="card-text"><%= comment.body %></p>
  </div>
  </div>
    <p class="mb-1"></p>

  <% end %>

  <% end %>

</p>

<br />
<hr />
<br />
<p>
<div class='comment-form' >
<h1 class="display-8" style="margin:0 0 33px 33px;">
<span class="badge badge-info">Publish Comment</span>
</h1>
  <%= form_with(model: [@product , @product.comments.build] , local: true) do |f|%>

  <p>
    <%= f.text_area :body , class: 'form-control', style: 'margin:0 0 33px 33px;width: 100%;height: 188px;' %>
  </p>
  <p>
    <%= f.submit 'Commit' , class: 'btn btn-primary', style: 'margin:0 0 33px 33px;width: 50%;' %>
  </p>
  <% end %>
</p>
</div>